
<template>
 <section class="cart-main-content">
         <section class="cart-main-content-shopname">
             <section class="select" 
             v-if="showEdit"
             :class="{active:shop.isSelect}" 
             @click="everyShopSelect({cartIndex})"></section>
             <span class="title">{{shop.shopName}}</span>
             <i class="fa fa-chevron-right"></i>
         </section>
         <ul class="cart-main-content-shop">
             <li is="my-li" v-for="(goodsEle,goodsIndex) in shop.goodsItems" 
             :children="goodsEle" 
             :shop="shop"
             :shopCart="shopCart"
             :goodsIndex="goodsIndex"
             :cartIndex="cartIndex"
             :showEdit="showEdit"
             :key="goodsIndex">
             </li>
         </ul>
   
 </section>
</template>
<script>
import goodsOne from "./goodsOne/goodsOne";
import { mapMutations } from "vuex";
export default {
  props: ["shopCart","shop", "cartIndex","showEdit"],
  components: {
    myLi: goodsOne,
  },

  created(){
    console.log(this.goodsEle,33333)
  },
  methods: {
    ...mapMutations(["everyShopSelect"])
  }
};
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.cart-main {
  &-content {
    .select {
         display: inline-block;
         width: px2rem(32);
         height: px2rem(32);
         border: 1px solid #c8c8c8;
         margin-left: px2rem(30);
         border-radius: px2rem(16);
         &.active {
              background: $basic-color;
            }
        }
    &-shopname {
      display: flex;
      align-items: center;
      width: 100%;
      height: px2rem(67);
      border-bottom: 1px solid #dddddf;

      .title {
        font-size: px2rem(26);
        color: #333333;
        margin-left: px2rem(15);
        margin-right: px2rem(15);
      }
    }
    &-shop {
      width: 100%;
      &-everyone {
        display: flex;
        width: 100%;
        // height: px2rem(200);
        align-items: center;
      }
    }
  }
}
</style>
